<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">销售出库详情</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                <!-- 工厂  miningBySales == 3 -->
                <template v-if="outSaleDetailData.customerType !== '5'">
                    <template v-if="isBatchNumber == false">
                        <template v-if="outSaleDetailData.miningBySales == '3'">
                            <!-- <el-col class="mr20 width100" v-if="outSaleDetailData.status == '0'">
                                <el-button
                                    class="btn-default width100"
                                    type="primary"
                                    v-hasPermi="['system:productOutOrder:confirm']"
                                    @click="confirmOutbound()"
                                >结束出库</el-button>
                            </el-col> -->
                            <el-col class="mr20 width100" v-if="outSaleDetailData.status == '0' ||outSaleDetailData.status == '4'">
                                <el-button
                                    class="btn-default width100"
                                    type="primary"
                                    v-hasPermi="['system:productOutOrder:submit']"
                                    @click="submitOutbound()"
                                >提交</el-button>
                            </el-col>
                            <el-col class="mr20 width100" v-if="outSaleDetailData.status == '3'">
                                <el-button
                                    class="btn-default width100"
                                    type="primary"
                                    v-hasPermi="['system:productOutOrder:confirm']"
                                    @click="audit()"
                                >审核</el-button>
                            </el-col>
                        </template>
                        <template v-else>
                            <!-- 销售转采购 miningBySales 1是 0否 -->
                            <template v-if="outSaleDetailData.miningBySales == '0'">
                                <el-col class="mr20 width100" v-if="outSaleDetailData.status == '0' ||outSaleDetailData.status == '4'">
                                    <el-button
                                        class="btn-default width100"
                                        type="primary"
                                        v-hasPermi="['system:productOutOrder:submit']"
                                        @click="submitOutbound()"
                                    >提交</el-button>
                                </el-col>
                                <el-col class="mr20 width100" v-if="outSaleDetailData.status == '3'">
                                    <el-button
                                        class="btn-default width100"
                                        type="primary"
                                        v-hasPermi="['system:productOutOrder:confirm']"
                                        @click="audit()"
                                    >审核</el-button>
                                </el-col>
                            </template>
                        </template>
                    </template>
                    <template v-else>
                        <el-col class="mr20 width100" v-if="outSaleDetailData.status == '0'">
                            <el-button
                                class="btn-default"
                                type="primary"
                                v-hasPermi="['system:dealerBinding:outbound']"
                                @click="batchNumberOutbound()"
                            >按批次一键出库</el-button>
                        </el-col>
                    </template>
                </template>
                <template v-else>
                    <el-col class="mr20 width100" v-if="outSaleDetailData.status == '0'">
                        <el-button
                            class="btn-default width100"
                            type="primary"
                            v-hasPermi="['system:dealerBinding:outbound']"
                            @click="oneKeyOutbound()"
                        >一键出库</el-button>
                    </el-col>
                </template>
                <el-col class="mr20 width100" v-if="outSaleDetailData.status == '1' || outSaleDetailData.status == '2'">
                    <el-button
                        class="btn-scanCodeDel"
                        type="primary"
                        icon="el-icon-download"
                        @click="btnPrint()"
                    >打印</el-button>
                </el-col>
                <el-col :span="10" class="status-container">
                    <div class="status-item">
                        <span :class="{ 'active' : outSaleDetailData.status == 0 }">待出库</span>
                        <span :class="{ 'active' : outSaleDetailData.status == 1 }">部分出库</span>
                        <span :class="{ 'active' : outSaleDetailData.status == 2 }">已出库</span>
                        <span :class="{ 'active' : outSaleDetailData.status == 3 }">待审核</span>
                        <span :class="{ 'active' : outSaleDetailData.status == 4 }">拒绝</span>
                        <span :class="{ 'active' : outSaleDetailData.status == 5 }">出库中</span>
                    </div>
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>单据编码：</span>{{ outSaleDetailData.code ? outSaleDetailData.code : '暂无' }}
                </el-col>
                <el-col :span="8">
                    <span>源销售订单：</span>{{ outSaleDetailData.businessCode ? outSaleDetailData.businessCode : '暂无' }}
                </el-col>
                <template v-if="outSaleDetailData.miningBySales !== '1' && outSaleDetailData.customerType !== '5'">
                    <el-col :span="8" v-if="outSaleDetailData.status == '0' || outSaleDetailData.status == '4'">
                        <template v-if="isBatchNumber == false">
                            <template v-if="isSerial == true">
                                <ul class="scan">
                                    <li v-for="(item, index) in scanList" :key="index" @click="changeScan(index)" :class="{'active' : index == current }">{{ item }}</li>
                                </ul>
                            </template>
                        </template>
                        <template v-else>
                            <ul class="scan">
                                <li v-for="(item, index) in batchList" :key="index" @click="batchChange(index)" :class="{'active' : index == batchCurrent }">{{ item }}</li>
                            </ul>
                        </template>
                    </el-col>
                </template>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>客户类型：</span>{{ outSaleDetailData.customerType == '1' ?  '企业客户' : outSaleDetailData.customerType == '2' ? '会员客户' : outSaleDetailData.customerType == '3' ? '内部客户' : outSaleDetailData.customerType == '5' ? '经销商' : '平台'}}
                </el-col>
                <el-col :span="8">
                    <span>客户名称：</span>{{ outSaleDetailData.customerName ? outSaleDetailData.customerName : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8" v-if="outSaleDetailData.customerDept !== ''">
                    <span>客户部门：</span>{{ outSaleDetailData.customerDept ?  outSaleDetailData.customerDept : '暂无'}}
                </el-col>
                <el-col :span="8">
                    <span>出库日期：</span>{{ outSaleDetailData.endTime ? outSaleDetailData.endTime : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>收货人：</span>{{ outSaleDetailData.name ? outSaleDetailData.name : '暂无' }}
                </el-col>
                <el-col :span="16">
                    <span>收货地址：</span>{{ outSaleDetailData.address ? outSaleDetailData.address : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>联系电话：</span>{{ outSaleDetailData.telephone ? outSaleDetailData.telephone : '暂无' }}
                </el-col>
                <template v-if="outSaleDetailData.customerType !== '5'">
                    <template v-if="outSaleDetailData.miningBySales !== '1'">
                        <el-col :span="8" v-if="outSaleDetailData.status == '0'">
                            <span>运输方式：</span><el-select v-model="outSaleDetailData.shippingMethod" style="width:100%;" placeholder="请选择">
                                <el-option
                                    v-for="item in methodList"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="8" v-else>
                            <span>运输方式：</span>{{ outSaleDetailData.shippingMethod ? outSaleDetailData.shippingMethod : '暂无' }}
                        </el-col>
                    </template>
                    <template v-else>
                        <el-col :span="8">
                            <span>运输方式：</span>{{ outSaleDetailData.shippingMethod ? outSaleDetailData.shippingMethod : '暂无' }}
                        </el-col>
                    </template>
                </template>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>物流单号：</span>{{ outSaleDetailData.shipmentNumber ? outSaleDetailData.shipmentNumber : '暂无' }}
                </el-col>
                <el-col :span="8">
                    <span>操作员：</span>{{ outSaleDetailData.operator ? outSaleDetailData.operator : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>发票类型：</span>{{ outSaleDetailData.invoiceType ?  outSaleDetailData.invoiceType : '暂无'}}
                </el-col>
                <el-col :span="8">
                    <span>状态：</span>
                    <font v-if="outSaleDetailData.status == 0" style="color:#13C2C2">待出库</font>
                    <font v-if="outSaleDetailData.status == 1" style="color:#52C41A">部分出库</font>
                    <font v-if="outSaleDetailData.status == 2" style="color:#52C41A">已出库</font>
                    <font v-if="outSaleDetailData.status == 3" style="color:#13C2C2">待审核</font>
                    <font v-if="outSaleDetailData.status == 4" style="color:#fd562c">拒绝</font>
                    <font v-if="outSaleDetailData.status == 5" style="color:#52C41A">出库中</font>
                </el-col>
        
                <!-- <template v-if="outSaleDetailData.miningBySales !== '1'">
                    <el-col :span="8" v-if="outSaleDetailData.status == '0'">
                        <span>备注：</span><el-input v-model="outSaleDetailData.remark" placeholder="请输入备注" />
                    </el-col>
                    <el-col :span="8" v-else>
                        <span>备注：</span>{{ outSaleDetailData.remark ? outSaleDetailData.remark : '暂无' }}
                    </el-col>
                </template>
                <template v-else>
                    <el-col :span="8">
                        <span>备注：</span>{{ outSaleDetailData.remark ? outSaleDetailData.remark : '暂无' }}
                    </el-col>
                </template> -->
            </el-row>
            <!-- class="input-data" -->
            <input v-model="code" v-if="outSaleDetailData.status == '0'"
                class="input-data"
                ref="getFocus"
                type="password"
                @blur="onBlur()"
                @keydown.enter="numberEnterDown()"
                @keyup.enter="numberEnterUp()"
            />
            <el-row class="detail-item">
                <el-col :span="24">
                    <el-table :data="outSaleDetailData.orderDetails" border>
                        <el-table-column label="序号" type="index" align="center" width="50" />
                        <template v-if="outSaleDetailData.customerType !== '5'">
                            <template v-if="isBatchNumber == false">
                                <el-table-column :label="item.label" :prop="item.prop" :width="item.width" v-for="(item, index) in columns" :key="index" align="center">
                                    <template slot-scope="scope">
                                        <template v-if="outSaleDetailData.miningBySales == '3'">
                                            <template v-if="item.type == '3'">
                                                <el-select v-model="scope.row[item.prop]" style="width:100%;" placeholder="请选择" :disabled="scope.row.outStore !== ''" v-if="scope.row.isSerial == '0'">
                                                    <el-option
                                                        v-for="item in warehouseList"
                                                        :key="item.warehouseId"
                                                        :label="item.name"
                                                        :value="item.warehouseId">
                                                    </el-option>
                                                </el-select>
                                                <el-select v-model="scope.row[item.prop]" style="width:100%;" placeholder="请选择" v-else @change="val => onSelectWarehouse(val, scope.row)" :disabled="scope.row.positionList !== null && (outSaleDetailData.status !== '0' || outSaleDetailData.status !== '4')">
                                                    <el-option
                                                        v-for="item in warehouseList"
                                                        :key="item.warehouseId"
                                                        :label="item.name"
                                                        :value="item.warehouseId">
                                                    </el-option>
                                                </el-select>
                                            </template>
                                            <template v-if="item.type == '5'">
                                                <el-input v-model="scope.row[item.prop]" placeholder="请输入备注" v-if="outSaleDetailData.status == '0' || outSaleDetailData.status == '4'" />
                                                <span v-else>{{ scope.row[item.prop] }}</span>
                                            </template>
                                            <span v-if="item.type == '1'">{{ scope.row[item.prop] }}</span>
                                            <template v-if="item.type == '2'">
                                                <template v-if="outSaleDetailData.status == '0' || outSaleDetailData.status == '4'">
                                                    <el-input v-model="scope.row[item.prop]" placeholder="扫码出库" v-if="scope.row.isSerial == '0'" disabled />
                                                    <el-input v-model="scope.row[item.prop]" placeholder="请输入数量" @input="(val) => inputNum(val, scope.row)" v-else @blur="val => onFocus(val, scope.row)" :disabled="scope.row.positionList ? true : false" />
                                                </template>
                                                <span v-else>{{ scope.row[item.prop] }}</span>
                                            </template>
                                            <template v-if="item.type == '4'">
                                                <template v-if="outSaleDetailData.status == '0' || outSaleDetailData.status == '4'">
                                                    <template v-if="scope.row.isSerial == '0'">
                                                        <el-input v-model="scope.row[item.prop]" disabled />
                                                    </template>
                                                    <el-input v-model="scope.row[item.prop]" v-else disabled placeholder="点击搜索按钮搜索">
                                                        <el-button slot="append" icon="el-icon-search" @click.stop="onClickWarehouseList(scope.$index, scope.row)"></el-button>
                                                    </el-input>
                                                </template>
                                                <span v-else>{{ scope.row[item.prop] }}</span>
                                            </template>
                                            <template v-if="scope.row.areaId !== null">
                                                <el-tooltip v-if="item.type == 'more'" effect="dark" content="多仓位" placement="bottom" >
                                                    <span class="el-icon-s-grid more" @click.stop="showMorePosition(scope.row)"></span>
                                                </el-tooltip>
                                            </template>
                                        </template>
                                        <template v-else>
                                            <template v-if="outSaleDetailData.miningBySales == '0'">
                                                <template v-if="item.type == '3'">
                                                    <template v-if="scope.row.isSerial == '0'">
                                                        <el-select v-model="scope.row[item.prop]" style="width:100%;" placeholder="请选择" disabled>
                                                            <el-option
                                                                v-for="item in warehouseList"
                                                                :key="item.warehouseId"
                                                                :label="item.name"
                                                                :value="item.warehouseId">
                                                            </el-option>
                                                        </el-select>
                                                        <!-- <el-select v-model="scope.row[item.prop]" style="width:100%;" placeholder="请选择" disabled v-else>
                                                            <el-option
                                                                v-for="item in warehouseList"
                                                                :key="item.warehouseId"
                                                                :label="item.name"
                                                                :value="item.warehouseId">
                                                            </el-option>
                                                        </el-select> -->
                                                    </template>
                                                    <template v-else>
                                                        <el-select v-model="scope.row[item.prop]" style="width:100%;" placeholder="请选择" v-if="outSaleDetailData.status == '0' || outSaleDetailData.status == '4'" @change="val => onSelectWarehouse(val, scope.row)" :disabled="scope.row.positionList !== null">
                                                            <el-option
                                                                v-for="item in warehouseList"
                                                                :key="item.warehouseId"
                                                                :label="item.name"
                                                                :value="item.warehouseId">
                                                            </el-option>
                                                        </el-select>
                                                        <el-select v-model="scope.row[item.prop]" style="width:100%;" placeholder="请选择" v-else disabled>
                                                            <el-option
                                                                v-for="item in warehouseList"
                                                                :key="item.warehouseId"
                                                                :label="item.name"
                                                                :value="item.warehouseId">
                                                            </el-option>
                                                        </el-select>
                                                    </template>
                                                </template>
                                                <template v-if="item.type == '5'">
                                                    <el-input v-model="scope.row[item.prop]" placeholder="请输入备注" v-if="outSaleDetailData.status == '0' || outSaleDetailData.status == '4'" />
                                                    <span v-else>{{ scope.row[item.prop] }}</span>
                                                </template>
                                                <span v-if="item.type == '1'">{{ scope.row[item.prop] }}</span>
                                                <template v-if="item.type == '2'">
                                                    <template v-if="outSaleDetailData.status == '0' || outSaleDetailData.status == '4'">
                                                        <!-- <template v-if="outSaleDetailData.orderType !== '1'"> -->
                                                            <el-input v-model="scope.row[item.prop]" placeholder="扫码出库" v-if="scope.row.isSerial == '0'" disabled />
                                                            <el-input v-model="scope.row[item.prop]" placeholder="请输入数量" @input="(val) => inputNum(val, scope.row)" v-else @blur="val => onFocus(val, scope.row)" :disabled="scope.row.positionList ? true : false" />
                                                        <!-- </template> -->
                                                        <!-- <template v-else>
                                                            <el-input v-model="scope.row[item.prop]" placeholder="请输入数量" @input="(val) => inputNum(val, scope.row)" @blur="val => onFocus(val, scope.row)" :disabled="scope.row.positionList ? true : false" />
                                                        </template> -->
                                                    </template>
                                                    <span v-else>{{ scope.row[item.prop] }}</span>
                                                </template>
                                                <template v-if="item.type == 'batch'">
                                                    <template v-if="scope.row.isSerial == '0'">
                                                        {{ scope.row[item.prop] }}
                                                    </template>
                                                    <template v-else>
                                                        <el-input v-if="scope.row.enableBatches == 0" v-model="scope.row[item.prop]" placeholder="请输入批次" />
                                                        <el-input v-else v-model="scope.row[item.prop]" disabled placeholder="未启用批次" />
                                                    </template>
                                                </template>
                                                <template v-if="item.type == '4'">
                                                    <template v-if="outSaleDetailData.status == '0' || outSaleDetailData.status == '4'">
                                                        <!-- <template v-if="outSaleDetailData.orderType !== '1'"> -->
                                                            <template v-if="scope.row.isSerial == '0'">
                                                                <el-input v-model="scope.row[item.prop]" disabled />
                                                            </template>
                                                            <el-input v-model="scope.row[item.prop]" v-else disabled placeholder="点击搜索按钮搜索">
                                                                <el-button slot="append" icon="el-icon-search" @click.stop="onClickWarehouseList(scope.$index, scope.row)"></el-button>
                                                            </el-input>
                                                        <!-- </template> -->
                                                        <!-- <template v-else>
                                                            <el-input v-model="scope.row[item.prop]" disabled placeholder="点击搜索按钮搜索">
                                                                <el-button slot="append" icon="el-icon-search" @click.stop="onClickWarehouseList(scope.$index, scope.row)"></el-button>
                                                            </el-input>
                                                        </template> -->
                                                    </template>
                                                    <span v-else>{{ scope.row[item.prop] }}</span>
                                                </template>
                                                <template v-if="scope.row.areaId !== null">
                                                    <el-tooltip v-if="item.type == 'more'" effect="dark" content="多仓位" placement="bottom" >
                                                        <span class="el-icon-s-grid more" @click.stop="showMorePosition(scope.row)"></span>
                                                    </el-tooltip>
                                                </template>
                                            </template>
                                            <template v-else>
                                                <template v-if="item.type == '3'">
                                                    <el-select v-model="scope.row[item.prop]" style="width:100%;" placeholder="请选择" disabled>
                                                        <el-option
                                                            v-for="item in warehouseList"
                                                            :key="item.warehouseId"
                                                            :label="item.name"
                                                            :value="item.warehouseId">
                                                        </el-option>
                                                    </el-select>
                                                </template>
                                                <template v-else>{{ scope.row[item.prop] }}</template>
                                            </template>
                                        </template>
                                    </template>
                                </el-table-column>
                            </template>
                            <template v-else>
                                <el-table-column :label="item.label" :prop="item.prop" :width="item.width" v-for="(item, index) in batchColumns" :key="index" align="center">
                                    <template slot-scope="scope">
                                        <template v-if="item.type == 'warehouse'">
                                            <el-select v-model="scope.row[item.prop]" style="width:100%;" placeholder="" disabled>
                                                <el-option
                                                    v-for="item in warehouseList"
                                                    :key="item.warehouseId"
                                                    :label="item.name"
                                                    :value="item.warehouseId">
                                                </el-option>
                                            </el-select>
                                        </template>
                                        <template v-else-if="item.type == 'batch'">
                                            <el-input ref="getBatchInput" v-model="scope.row[item.prop]" placeholder="请输入批次" @input="(val) => inputBatch(val, scope.row)" @blur="val => onBatchBlur(val, scope.row, scope.$index)" />
                                        </template>
                                        <template v-else>{{ scope.row[item.prop] }}</template>
                                    </template>
                                </el-table-column>
                            </template>
                        </template>
                        <template v-else>
                            <el-table-column :label="item.label" :prop="item.prop" :width="item.width" v-for="(item, index) in dealerBindingColumns" :key="index" align="center">
                                <template slot-scope="scope">
                                    {{ scope.row[item.prop] }}
                                </template>
                            </el-table-column>
                        </template>
                        <template v-if="outSaleDetailData.invoiceType !== '收据' && outSaleDetailData.invoiceType !== null && outSaleDetailData.invoiceType !== ''">
                            <el-table-column label="发票号" align="center" prop="invoice" width="120">
                                <template slot-scope="scope">
                                <el-input placeholder="" v-model="scope.row.invoice" @blur="onInvoiceSave(scope.row)" />
                                </template>
                            </el-table-column>
                        </template>
                    </el-table>
                </el-col>
            </el-row>
        </div>
        <!-- 多仓位 -->
        <el-dialog :visible.sync="morePosition" width="800px" top="100px" append-to-body center :close-on-click-modal='false' :close-on-press-escape='false' :show-close="false">
            <el-row class="mlb10">
                <el-col :span="6" style="line-height:34px;">
                    <span>待出库数量：</span>{{ total }}
                </el-col>
            </el-row>
            <el-table :data="moreData">
                <el-table-column label="名称" align="center" prop="productName" />
                <el-table-column label="实际数量" align="center" prop="endNum">
                    <template slot-scope="scope">
                        <template v-if="scope.row.isSerial == '0'">
                            <el-input placeholder="扫码入库" v-model="scope.row.endNum" disabled />
                        </template>
                        <template v-else>
                            <template v-if="outSaleDetailData.status == '0'">
                                <el-input placeholder="请输入" v-model="scope.row.endNum" @input="(val) => inputEditNum(val, scope.row)" @blur="(val) => onBlurEditNum(val, scope.row)" />
                            </template>
                            <template v-else>
                                {{ scope.row.endNum }}
                            </template>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="仓库" align="center" prop="warehouse">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.warehouse" style="width:100%;" placeholder="请选择" disabled>
                            <el-option
                                v-for="item in warehouseList"
                                :key="item.warehouseId"
                                :label="item.name"
                                :value="item.warehouseId">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="仓位" align="center" prop="positionName">
                    <template slot-scope="scope">
                        <template v-if="scope.row.isSerial == '0'">
                            <el-input v-model="scope.row.positionName" disabled />
                        </template>
                        <template v-else>
                            <template v-if="outSaleDetailData.status == '0'">
                                <el-input v-model="scope.row.positionName" disabled placeholder="点击搜索按钮搜索">
                                    <el-button slot="append" icon="el-icon-search" @click.stop="morePositionWarehouseList(scope.$index, scope.row)"></el-button>
                                </el-input>
                            </template>
                            <template v-else>
                                 <el-input v-model="scope.row.positionName" disabled />
                            </template>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="" align="center" width="90px" class-name="small-padding fixed-width">
                    <template slot-scope="scope" v-if="scope.row.isSerial !== '0' && outSaleDetailData.status == '0'">
                        <span class="el-icon-circle-plus-outline icon-more-position" @click.stop="onAddMorePosition(scope.row)"></span>
                        <span class="el-icon-circle-close icon-more-position" @click.stop="onDeleteMorePosition(scope.row)" v-if="scope.row.isSerial !== '0' && scope.$index !== 0"></span>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" class="btn-success width100" @click="onHideMorePosition">关闭</el-button>
            </div>
        </el-dialog>
        <!-- 审核/反审核 -->
        <el-dialog :visible.sync="open" width="500" top="100px" append-to-body title="审核意见" center>
            <el-row>
                <el-col :span="24">
                    <textarea
                        class="approve-textarea"
                        v-model="approveRemark"
                        type="textarea"
                        placeholder="请输入意见和看法"
                    >
                    </textarea>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    class="btn-success mr20 width100"
                    @click="confirmOutbound()"
                >同意</el-button>
                <el-button
                    type="primary"
                    class="btn-cancel width100"
                    @click="disagreeApprove()"
                >拒绝</el-button>
            </div>
        </el-dialog>
        <!-- 打印 -->
        <div ref="print" style="position:absolute;left:0;right:0;z-index:-999;">
            <h1 style="font-size:20px;text-align:center;margin-bottom:20px;">出库单</h1>
            <p style="display:flex;font-size:14px;line-height:40px;">
                <span style="flex:1;align-items:flex-end;">单据编码：{{ outSaleDetailData.code }}</span>
                <span style="flex:1;align-items:flex-end;">源销售订单：{{ outSaleDetailData.businessCode }}</span>
                <span style="flex:1;align-items:flex-end;">出库日期：{{ outSaleDetailData.endTime }}</span>
            </p>
            <p style="display:flex;font-size:14px;line-height:40px;">
                <span style="flex:1;align-items:flex-end;">收货人：{{ outSaleDetailData.name }}</span>
                <span style="flex:1;align-items:flex-end;">收货地址：{{ outSaleDetailData.address }}</span>
                <span style="flex:1;align-items:flex-end;">联系电话：{{ outSaleDetailData.telephone }}</span>
            </p>
            <p style="display:flex;font-size:14px;line-height:40px;">
                <!-- <span style="flex:1;align-items:flex-end;">运输方式：{{ outSaleDetailData.shippingMethod }}</span> -->
                <!-- <span style="flex:1;align-items:flex-end;">物流单号：{{ outSaleDetailData.shipmentNumber }}</span> -->
                <span style="flex:1;align-items:flex-end;">操作人：{{ outSaleDetailData.updateBy }}</span>
            </p>
            <table style="font-size:14px;margin-top:10px;width:100%;border:1px solid #000;border-collapse:collapse;border-top:none;border-right:none;">
                <tr>
                    <th width="20%" style="border:1px solid #000;border-left:none;padding:10px 0;">产品编码</th>
                    <th width="20%" style="border:1px solid #000;border-left:none;padding:10px 0;">产品名称</th>
                    <th width="15%" style="border:1px solid #000;border-left:none;padding:10px 0;">批号</th>
                    <th width="15%" style="border:1px solid #000;border-left:none;padding:10px 0;">规格</th>
                    <th width="10%" style="border:1px solid #000;border-left:none;padding:10px 0;">订单数量</th>
                    <th width="10%" style="border:1px solid #000;border-left:none;padding:10px 0;">实际出库</th>
                    <th width="10%" style="border:1px solid #000;border-left:none;padding:10px 0;">仓库</th>
                </tr>
                <tr v-for="item in orderDetails" :key="item.id">
                    <td width="20%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.productBasicCode }}</td>
                    <td width="20%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.productBasicName }}</td>
                    <td width="15%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.batchNumber }}</td>
                    <td width="15%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.productSpace }}</td>
                    <td width="10%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.orderNum }}</td>
                    <td width="10%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.outStore }}</td>
                    <td width="10%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.warehouse }}</td>
                </tr>
            </table>
        </div>
        <!-- 根据批次查询数据 -->
        <el-dialog title="批次查询产品信息" :visible.sync="batchOpen" width="80%" top="50px" append-to-body center :before-close="handleClose">
            <el-table :data="dataList" @row-click="onSelectData" border>
                <el-table-column label="序号" type="index" align="center" width="50" />
                <el-table-column label="SKU编码" align="center" prop="specificationCode" :show-overflow-tooltip="true" sortable />
                <el-table-column label="SKU名称" align="center" prop="specificationName" :show-overflow-tooltip="true" />
                <el-table-column label="批次" align="center" prop="batchNumber" :show-overflow-tooltip="true" />
                <el-table-column label="库存" align="center" prop="count" :show-overflow-tooltip="true" />
                <el-table-column label="仓库" align="center" prop="warehouseName" :show-overflow-tooltip="true" />
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import { detailOutSale, confirmOutSale, splitOrderOutSale, outOfStock, deleteScanCode, editOutSale, storageMorePosition, storageAddPosition, storageEditPosition, storageMoreAdd, storageDeletePosition, storageUpdatePosition, delMorePosition, submitOutSale, oneOutbound, batchOutbound, batchDetail } from "@/api/system/outSale/outSale"
import { orderSearchStorage } from "@/api/system/order/order"
import { scan } from "@/api/system/scan/scan"
import { detailConfig } from "@/api/system/setting/config/config"
import { queryWarehouse } from "@/api/system/warehouse/warehouse"
export default {
    name: "outSaleDetail",
    data() {
        return {
            id: '',
            outSaleDetailData: {
                status: '0'
            },
            orderDetails: [],
            scanList: ['扫码出库', '删除扫码', '按批次出库'],
            batchList: ['扫码出库', '按批次出库'],
            current: 0,
            batchCurrent: 1,
            columns: [{
                prop: "warehouse",
                label: "仓库",
                width: 150,
                type: '3'
            },{
                prop: "productBasicCode",
                label: "产品编码",
                width: 200,
                type: '1'
            },{
                prop: "productCode",
                label: "SKU编码",
                width: 150,
                type: '1'
            },{
                prop: "productBasicName",
                label: "产品名称",
                width: 200,
                type: '1'
            },
            //   {
            //     prop: "productName",
            //     label: "SKU名称",
            //     width: 150,
            //     type: '1'
            // },
              {
                prop: "productSpace",
                label: "规格",
                width: 120,
                type: '1'
            },{
                prop: "batchNumber",
                label: "批号",
                type: 'batch',
                width: 150,
            },{
                prop: "orderNum",
                label: "订单数量",
                width: 100,
                type: '1'
            },{
                prop: "total",
                label: "待出库数量",
                width: 100,
                type: '1'
            },{
                prop: "outStore",
                label: "实际出库",
                width: 120,
                type: '2'
            },{
                prop: 'realTimeStock',
                label: '库存',
                width: 100,
                type: '1',
            },{
                prop: "positionName",
                label: "仓位",
                width: 220,
                type: '4'
            },{
                prop: "remark",
                label: "备注",
                type: '5',
                width: 120
            },{
                label: "",
                width: 60,
                type: 'more'
            }],
            batchColumns:[{
                prop: "warehouse",
                label: "仓库",
                width: 150,
                type: 'warehouse'
            },{
                prop: "productBasicCode",
                label: "产品编码",
                width: 200,
            },{
                prop: "productCode",
                label: "SKU编码",
                width: 150,
            },{
                prop: "productBasicName",
                label: "产品名称",
                width: 200,
            },{
                prop: "productSpace",
                label: "规格",
                width: 120,
            },{
                prop: "batchNumber",
                label: "批号",
                type: 'batch',
                width: 150,
            },{
                prop: "orderNum",
                label: "订单数量",
                width: 100,
            },{
                prop: "outStore",
                label: "实际出库",
                width: 120,
            },{
                prop: 'realTimeStock',
                label: '库存',
                width: 100,
            }],
            dealerBindingColumns:[{
                prop: "productBasicCode",
                label: "产品编码",
                width: 200,
            },{
                prop: "productCode",
                label: "SKU编码",
                width: 150,
            },{
                prop: "productBasicName",
                label: "产品名称",
                width: 200,
            },{
                prop: "productSpace",
                label: "规格",
                width: 120,
                type: '1'
            },{
                prop: "batchNumber",
                label: "批号",
                type: 'batch',
                width: 150,
            },{
                prop: "orderNum",
                label: "订单数量",
                width: 100,
            },{
                prop: "total",
                label: "待出库数量",
                width: 100,
            },{
                prop: "outStore",
                label: "实际出库",
                width: 120,
            },{
                prop: "remark",
                label: "备注",
                width: 120
            }],
            // 运输方式
            methodList: [
                {
                    value: '德邦到付'
                },
                {
                    value: '物特现付'
                },
                {
                    value: '申通现付'
                },
                {
                    value: '送货上门'
                },
                {
                    value: '现付'
                }
            ],
            // 仓库
            warehouseList: [],
            code: '',
            morePosition: false,
            moreData: [],
            total: '', // 订单数量
            pendingStorage: '', // 待出库
            open: false,
            approveRemark: '',
            isSerial: false,
            isBatchNumber: false,
            batchOpen: false,
            dataList: [],
            index: 0
        }
    },
    created() {
        this.id = this.$route.query.id
        // 产品仓位数据
        if(this.$route.query.data && this.$route.query.data !== '[object Object]'){
            this.outSaleDetailData = this.$route.query.data
            let index = this.$route.query.index
            let data = this.outSaleDetailData.orderDetails[index]
            let warehouseData = {
                id: data.id,
                warehouse: data.warehouse,
                areaId: data.areaId,
                areaName: data.areaName,
                positionId: data.positionId,
                positionName: data.positionName,
            }
            let obj = {
                specificationCode: data.productCode,
                batchNumber: data.batchNumber,
                warehouseId: data.warehouse,
                areaId: data.areaId,
                positionId: data.positionId
            }
            // 查询库存数量
            orderSearchStorage(obj).then(res => {
                if(res.code == 200){
                    if(res.data && res.data > 0){
                        editOutSale(warehouseData).then(res => {
                            if(res.code == 200){
                                this.getDetailData()
                            }
                        })
                    }else{
                        this.$modal.msgError('库存不足！')
                        this.getDetailData()
                    }
                    this.$router.push({ query: {id: this.id} })
                }
            })
        }else{
            this.getDetailData()
        }
        // 多仓位仓位数据
        if(this.$route.query.list && this.$route.query.list !== '[object Object]'){
            this.openPosition = true
            let list = this.$route.query.list
            let index = this.$route.query.index
            let total = this.$route.query.total
            let pendingStorage = this.$route.query.pendingStorage
            storageMorePosition(list.businessId).then(res => {
                if(res.code == 200){
                    this.morePosition = true
                    this.total = total
                    this.pendingStorage = pendingStorage
                    this.moreData = res.rows
                    this.moreData[index] = list
                    storageUpdatePosition(this.moreData[index]).then(res => {
                        if(res.code == 200){
                            this.getDetailData()
                            this.$router.push({ query: {id: this.id} })
                        }else{
                            this.$modal.msgError(res.msg)
                            storageMorePosition(list.businessId).then(res => {
                                if(res.code == 200){
                                    res.rows.forEach(item => {
                                        if(item.endNum == 0){
                                        return item.endNum = ''
                                        }
                                    })
                                    this.moreData = res.rows
                                    this.$router.push({ query: {id: this.id} })
                                }
                            })
                        }
                    })
                }
            })
        }
    },
    mounted(){
        if(this.outSaleDetailData.status == '0' && this.outSaleDetailData.orderType !== '1' && this.outSaleDetailData.customerType !== '5'){
            // this.$modal.msgSuccess("扫码出库")
            this.$refs.getFocus.focus()
        }
    },
    methods: {
        // 获取详情信息
        getDetailData() {
            detailOutSale(this.id).then(res => {
                this.outSaleDetailData = res.data
                if(res.data.status == '0' || res.data.status == '4'){
                    res.data.orderDetails.forEach(item => {
                        if(item.outStore == 0){
                            return item.outStore = ''
                        }
                    })
                    let isSerial = res.data.orderDetails.some(val => val.isSerial == '0')
                    if(isSerial == true){
                        this.isSerial = true
                    }
                }
                // if(this.outSaleDetailData.shippingMethod == null || this.outSaleDetailData.shippingMethod == ''){
                //     this.outSaleDetailData.shippingMethod = '德邦到付'
                // }
                this.orderDetails = res.data.orderDetails
                this.printDetail = res.data.orderDetails
                this.getWarehouseList()
            })
        },
        // 获取仓库列表
        getWarehouseList(){
            queryWarehouse().then(res => {
                if(res.code == 200){
                    this.warehouseList = res.data
                    this.printDetail.forEach(i => {
                        // console.log(i)
                        let dataList = res.data.find(item => {
                            return item.warehouseId == i.warehouse
                        })
                        if(dataList != undefined){
                            i.warehouse = dataList.name
                        }
                    })
                }
            })
        },
        // 提交
        submitOutbound(){
            this.orderDetails.forEach(i => {
                let dataList = this.warehouseList.find(item => {
                    return item.name == i.warehouse
                })
                if(dataList != undefined){
                    i.warehouse = dataList.warehouseId
                }
            })
            this.$modal.loading("正在提交")
            // console.log(this.orderDetails)
            submitOutSale({id: this.id, status: 3, orderDetails: this.orderDetails}).then(res => {
                if(res.code == 200){
                    this.$modal.closeLoading()
                    this.$modal.msgSuccess("操作成功")
                    this.$tab.closeOpenPage({ path: "/sales/outSale/list" })
                }else{
                    this.$modal.closeLoading()
                    this.$modal.msgError(res.msg)
                }
            })
        },
        // 审核
        audit(){
            this.open = true
        },
        // 结束出库
        confirmOutbound(){
            // 判断实际入库不为空
            let index = this.orderDetails.findIndex(val => val.outStore !== '')
            this.orderDetails.forEach(i => {
                let dataList = this.warehouseList.find(item => {
                    return item.name == i.warehouse
                })
                if(dataList != undefined){
                    i.warehouse = dataList.warehouseId
                }
            })
            // 多条数据
            if(this.orderDetails.length > 1){
                if(index > -1){
                    if(this.outSaleDetailData.miningBySales == '0'){
                        // 判断一条数据实际出库数量小于订单数量
                        let num = this.orderDetails.every(val => {
                            if(val.outStore < val.total){
                                return false
                            }else{
                                return true
                            }
                        })
                        this.orderDetails.forEach(item => {
                            if(item.outStore == ''){
                                item.outStore = 0
                            }
                        })
                        let arr = this.orderDetails
                        if(num == true){
                            if(this.outSaleDetailData.orderType == '1'){
                                confirmOutSale({id: this.id, businessType: this.outSaleDetailData.businessType, orderDetails: this.orderDetails, remark: this.outSaleDetailData.remark, saleOrderStatus: '3',orderType: this.outSaleDetailData.orderType }).then(res => {
                                    if(res.code == 200){
                                        this.$modal.msgSuccess("操作成功")
                                        this.$tab.closeOpenPage({ path: "/sales/outSale/list" })
                                    }
                                })
                            }else{
                                // 确认出库
                                confirmOutSale({id: this.id, businessType: this.outSaleDetailData.businessType, orderDetails: arr, remark: this.outSaleDetailData.remark, saleOrderStatus: '3', orderType: this.outSaleDetailData.orderType}).then(res => {
                                    console.log(res)
                                    if(res.code == 200){
                                        this.$modal.msgSuccess("操作成功")
                                        this.$tab.closeOpenPage({ path: "/sales/outSale/list" })
                                    }
                                })
                            }
                        }else{
                            if(this.outSaleDetailData.orderType == '1'){
                                confirmOutSale({id: this.id, businessType: this.outSaleDetailData.businessType, orderDetails: this.orderDetails, remark: this.outSaleDetailData.remark, saleOrderStatus: '3',orderType: this.outSaleDetailData.orderType }).then(res => {
                                    if(res.code == 200){
                                        this.$modal.msgSuccess("操作成功")
                                        this.$tab.closeOpenPage({ path: "/sales/outSale/list" })
                                    }
                                })
                            }else{
                                // 判断是否允许拆单
                                detailConfig('splitOrder', 'outSale').then(res => {
                                    if(res.data[0].ifAllow == '0'){
                                        this.$modal.confirm('是否拆单？', '拆单').then(() => {
                                            // 拆单
                                            splitOrderOutSale({id: this.id, businessType: this.outSaleDetailData.businessType, orderDetails: arr, remark: this.outSaleDetailData.remark, orderType: this.outSaleDetailData.orderType}).then(res => {
                                                if(res.code == 200){
                                                    this.$modal.msgSuccess("操作成功")
                                                    this.$tab.closeOpenPage({ path: "/sales/outSale/list" })
                                                }
                                            })
                                        }).catch(action => {
                                            if(action == 'cancel'){
                                                // 确认出库
                                                confirmOutSale({id: this.id, businessType: this.outSaleDetailData.businessType, orderDetails: arr, remark: this.outSaleDetailData.remark, status: '1', orderType: this.outSaleDetailData.orderType}).then(res => {
                                                    if(res.code == 200){
                                                        this.$modal.msgSuccess("操作成功")
                                                        this.$tab.closeOpenPage({ path: "/sales/outSale/list" })
                                                    }
                                                })
                                            }
                                        })
                                    }else{
                                        this.$modal.msgError('不允许拆单，请编辑实际出库！')
                                    }
                                })
                            }
                        }
                    }else{
                        // 确认出库
                        confirmOutSale({id: this.id, businessType: this.outSaleDetailData.businessType, orderDetails: this.orderDetails, remark: this.outSaleDetailData.remark, saleOrderStatus: '3', orderType: this.outSaleDetailData.orderType}).then(res => {
                            console.log(res)
                            if(res.code == 200){
                                this.$modal.msgSuccess("操作成功")
                                this.$tab.closeOpenPage({ path: "/sales/outSale/list" })
                            }
                        })
                    }
                }else{
                    this.$modal.msgError('实际出库不能为空！')
                }
            }else{
                // 单条数据
                let outStore = this.orderDetails.every(val => !!val.outStore)
                if(outStore == true){
                    if(this.outSaleDetailData.miningBySales == '0'){
                        if(this.outSaleDetailData.orderType == '1'){
                            confirmOutSale({id: this.id, businessType: this.outSaleDetailData.businessType, orderDetails: this.orderDetails, remark: this.outSaleDetailData.remark, saleOrderStatus: '3',orderType: this.outSaleDetailData.orderType }).then(res => {
                                if(res.code == 200){
                                    this.$modal.msgSuccess("操作成功")
                                    this.$tab.closeOpenPage({ path: "/sales/outSale/list" })
                                }
                            })
                        }else{
                            this.orderDetails.forEach(item => {
                                if(item.outStore == item.total){
                                    confirmOutSale({id: this.id, businessType: this.outSaleDetailData.businessType, orderDetails: this.orderDetails, remark: this.outSaleDetailData.remark, saleOrderStatus: '3', orderType: this.outSaleDetailData.orderType}).then(res => {
                                        if(res.code == 200){
                                            this.$modal.msgSuccess("操作成功")
                                            this.$tab.closeOpenPage({ path: "/sales/outSale/list" })
                                        }
                                    })
                                }else if(item.outStore < item.total){
                                    // 是否允许拆单
                                    detailConfig('splitOrder', 'outSale').then(res => {
                                        let ifAllow = res.data[0].ifAllow
                                        if(ifAllow == '0'){
                                            this.$modal.confirm('是否拆单？', '拆单').then(() => {
                                                // 拆单
                                                splitOrderOutSale({id: this.id, businessType: this.outSaleDetailData.businessType, orderDetails: this.orderDetails, remark: this.outSaleDetailData.remark, orderType: this.outSaleDetailData.orderType}).then(res => {
                                                    if(res.code == 200){
                                                        this.$modal.msgSuccess("操作成功")
                                                        this.$tab.closeOpenPage({ path: "/sales/outSale/list" })
                                                    }
                                                })
                                            }).catch(action => {
                                                if(action == 'cancel'){
                                                    // 确认出库
                                                    confirmOutSale({id: this.id, businessType: this.outSaleDetailData.businessType, orderDetails: this.orderDetails, remark: this.outSaleDetailData.remark, status: '1', orderType: this.outSaleDetailData.orderType}).then(res => {
                                                        if(res.code == 200){
                                                            this.$modal.msgSuccess("操作成功")
                                                            this.$tab.closeOpenPage({ path: "/sales/outSale/list" })
                                                        }
                                                    })
                                                }
                                            })
                                        }else{
                                            this.$modal.msgError('不允许拆单，请编辑实际出库！')
                                        }
                                    })
                                }
                            })
                        }
                    }else{
                        confirmOutSale({id: this.id, businessType: this.outSaleDetailData.businessType, orderDetails: this.orderDetails, remark: this.outSaleDetailData.remark, saleOrderStatus: '3', orderType: this.outSaleDetailData.orderType}).then(res => {
                            if(res.code == 200){
                                this.$modal.msgSuccess("操作成功")
                                this.$tab.closeOpenPage({ path: "/sales/outSale/list" })
                            }
                        })
                    }
                }else{
                    this.$modal.msgError('实际出库不能为空！')
                }
            }
        },
        // 拒绝
        disagreeApprove(){
            submitOutSale({id: this.id, status: 4, approvalRemark: this.approveRemark}).then(res => {
                if(res.code == 200){
                    this.open = false
                    this.$modal.msgSuccess("操作成功")
                    this.$tab.closeOpenPage({ path: "/sales/outSale/list" })
                }
            })
        },
        // 切换扫码出库/删除扫码
        changeScan(index){
            this.current = index
            if(index == 1){
                this.$modal.msgError("删除扫码")
                this.$refs.getFocus.focus()
            }else if(index == 0){
                this.$modal.msgSuccess("扫码出库")
                this.$refs.getFocus.focus()
            }else{
                this.isBatchNumber = true
                this.index = 0
                this.$nextTick(() => {
                    this.$refs.getBatchInput[this.index].focus()
                    this.$refs.getBatchInput[this.index].blur()
                    this.index ++ 
                })
            }
        },
        onBlur(){
            this.current = -1
        },
        numberEnterDown() {
            this.keyDownTime = new Date().getTime()
        },
        numberEnterUp() {
            this.keyUpTime = new Date().getTime()
            if (this.keyUpTime - this.keyDownTime < 30) {
                // 扫码枪触发
                let newCode = this.common.codeRule(this.code)
                // let code = this.code.split("=")
                // let newCode = code[code.length-1]
                if(this.current == 0){
                    // 码检测
                    scan({code: newCode, codeType: 2}).then(res => {
                        if(res.code == 200){
                            this.$modal.loading("正在执行")
                            outOfStock({code: newCode, outOrderId: this.id}).then(res => {
                                if(res.code == 200){
                                    this.$modal.closeLoading()
                                    this.$modal.msgSuccess("扫码成功")
                                    this.getDetailData()
                                    this.code = ''
                                }else{
                                    this.$modal.closeLoading()
                                    this.$modal.msgError(res.msg)
                                    this.code = ''
                                }
                            })
                        }else{
                            this.$modal.msgError(res.msg)
                            this.code = ''
                        }
                    })
                }else{
                    scan({code: newCode, codeType: 1}).then(res => {
                        if(res.code == 200){
                            this.$modal.loading("正在执行")
                            deleteScanCode({code: newCode, outOrderId: this.id}).then(res => {
                                if(res.code == 200){
                                    this.$modal.closeLoading()
                                    this.$modal.msgSuccess("删除成功")
                                    this.getDetailData()
                                    this.code = ''
                                }else{
                                    this.$modal.closeLoading()
                                    this.$modal.msgError(res.msg)
                                    this.code = ''
                                }
                            })
                        }else{
                            this.$modal.msgError(res.msg)
                            this.code = ''
                        }
                    })
                }
            }else{
                // 直接按键盘触发
                // console.log(this.code)
                let newCode = this.common.codeRule(this.code)
                // let code = this.code.split("=")
                // let newCode = code[code.length-1]
                if(this.current == 0){
                    // 码检测
                    scan({code: newCode, codeType: 2}).then(res => {
                        if(res.code == 200){
                            this.$modal.loading("正在执行")
                            outOfStock({code: newCode, outOrderId: this.id}).then(res => {
                                if(res.code == 200){
                                    this.$modal.closeLoading()
                                    this.$modal.msgSuccess("扫码成功")
                                    this.getDetailData()
                                    this.code = ''
                                }else{
                                    this.$modal.closeLoading()
                                    this.$modal.msgError(res.msg)
                                    this.code = ''
                                }
                            })
                        }else{
                            this.$modal.msgError(res.msg)
                            this.code = ''
                        }
                    })
                }else{
                    scan({code: newCode, codeType: 1}).then(res => {
                        if(res.code == 200){
                            this.$modal.loading("正在执行")
                            deleteScanCode({code: newCode, outOrderId: this.id}).then(res => {
                                if(res.code == 200){
                                    this.$modal.closeLoading()
                                    this.$modal.msgSuccess("删除成功")
                                    this.getDetailData()
                                    this.code = ''
                                }else{
                                    this.$modal.closeLoading()
                                    this.$modal.msgError(res.msg)
                                    this.code = ''
                                }
                            })
                        }else{
                            this.$modal.msgError(res.msg)
                            this.code = ''
                        }
                    })
                }
            }
        },
        // 跳转仓库列表页面
        onClickWarehouseList(index, row){
            if(row.warehouse !== '' && row.warehouse !== null){
                // 当前选中仓库对应仓库列表的数据
                let isWarehouse = ''
                if(!isNaN(Number(row.warehouse))){
                    isWarehouse = this.warehouseList.find(item => item.warehouseId == row.warehouse)
                }else{
                    isWarehouse = this.warehouseList.find(item => item.name == row.warehouse)
                }
                // 判断是否启用仓位管理
                if(isWarehouse.openPosition == '0'){
                    if(row.outStore !== ''){
                        this.$modal.msgError('实际出库已存在，不能编辑!')
                    }else{
                        if(this.outSaleDetailData.orderDetails[index].warehouse !== null){
                            let data = this.outSaleDetailData.orderDetails[index]
                            let dataList = this.warehouseList.find(item => {
                                return item.name == data.warehouse
                            })
                            if(dataList != undefined){
                                data.warehouse = dataList.warehouseId
                            }
                            this.$router.push({path:"/warehouseManagement/warehouse/list", query:{ type: 'outSale', data: this.outSaleDetailData, index: index }})
                        }else{
                            this.$modal.msgError('请选择仓库！')
                        }
                    }
                }else{
                    this.$modal.msgError('未启用仓位管理！')
                }
            }else{
                this.$modal.msgError('仓库不能为空!')
            }
        },
        // 产品仓库选择
        onSelectWarehouse(val, row){
            // console.log('111')
            editOutSale({id: row.id, warehouse: row.warehouse, outStore: 0, pendingStorage: row.total, updateWarehouse: 1}).then(res => {
                if(res.code == 200){
                    this.getDetailData()
                }
            })
            // 当前选中仓库对应仓库列表的数据
            // let isWarehouse = this.warehouseList.find(item => item.warehouseId == row.warehouse)
            // if(isWarehouse.openPosition !== '0'){
            //     storageMorePosition(row.id).then(res => {
            //         // 判断多仓位
            //         if(res.rows.length !== 0){
            //             storageDeletePosition({businessId: row.id, businessType: 1}).then(res => {
            //                 if(res.code == 200){
            //                     // this.$modal.msgError('未启用仓位管理！')
            //                 }
            //             })
            //         }
            //     })
            // }
        },
        // 手动填写数量出库
        onFocus(val, row){
            // let warehouse = ''
            // if(!isNaN(Number(row.warehouse))){
            //     warehouse = this.warehouseList.find(item => item.warehouseId == row.warehouse)
            // }else{
            //     warehouse = this.warehouseList.find(item => item.name == row.warehouse)
            // }
            // if(val.target.value !== ''){
            //     let obj = {
            //         specificationCode: row.productCode,
            //         batchNumber: row.batchNumber == null ? -1 : row.batchNumber,
            //         warehouseId: warehouse.warehouseId,
            //         areaId: row.areaId,
            //         positionId: row.positionId
            //     }
            //     // 查询库存数量
            //     orderSearchStorage(obj).then(res => {
            //         if(res.code == 200){
            //             if(res.data && res.data > 0){
            //                 editOutSale({id: row.id, outStore: val.target.value, areaId: row.areaId, areaName: row.areaName, positionName: row.positionName, positionId: row.positionId, pendingStorage: row.total - val.target.value}).then(res => {
            //                     if(res.code == 200){
            //                         this.getDetailData()
            //                         this.$modal.msgSuccess("操作成功")
            //                     }
            //                 })
            //             }else{
            //                 row.outStore = ''
            //                 this.$modal.msgError('库存不足！')
            //             }
            //         }
            //     })
            // }
        },
        // 数量验证
        inputNum(e, row){
            // 当前选中仓库对应仓库列表的数据
            if(row.warehouse !== '' && row.warehouse !== null){
                let isWarehouse = ''
                if(!isNaN(Number(row.warehouse))){
                    isWarehouse = this.warehouseList.find(item => item.warehouseId == row.warehouse)
                }else{
                    isWarehouse = this.warehouseList.find(item => item.name == row.warehouse)
                }
                // 判断是否启用仓位管理
                if(isWarehouse.openPosition == '0'){
                    if(row.areaId !== null){
                        if(e == '' || e == undefined){
                            // this.$modal.msgError('实际出库不能为空!')
                        }else{
                            if(/^[1-9]\d*$|^0$/.test(e) == false){
                                this.$modal.msgError('实际出库必须是数字！')
                                row.outStore = ''
                            }else{
                                if(Number(e) <= 0){
                                    this.$modal.msgError('数量必须大于0!')
                                    row.outStore = ''
                                }else{
                                    if(Number(e) > row.realTimeStock){
                                        this.$modal.msgError('实际出库不能大于库存数量!')
                                        row.outStore = ''
                                    }else{
                                        if(Number(e) > row.total){
                                            this.$modal.msgError('实际出库不能大于订单数量!')
                                            row.outStore = ''
                                        }
                                    }
                                }
                            }
                        }
                    }else{
                        row.outStore = ''
                        this.$modal.msgError('请选择仓位!')
                    }
                }else{
                    if(e == '' || e == undefined){
                        // this.$modal.msgError('实际出库不能为空!')
                    }else{
                        if(/^[1-9]\d*$|^0$/.test(e) == false){
                            this.$modal.msgError('实际出库必须是数字！')
                            row.outStore = ''
                        }else{
                            if(Number(e) <= 0){
                                this.$modal.msgError('数量必须大于0!')
                                row.outStore = ''
                            }else{
                                // console.log(row.realTimeStock)
                                // console.log(Number(e))
                                if(Number(e) > row.realTimeStock){
                                    this.$modal.msgError('实际出库不能大于库存数量!')
                                    row.outStore = ''
                                }else{
                                    if(Number(e) > row.total){
                                        this.$modal.msgError('实际出库不能大于订单数量!')
                                        row.outStore = ''
                                    }
                                }
                            }
                        }
                    }
                }
            }else{
                row.outStore = ''
                this.$modal.msgError('仓库不能为空!')
            }
        },
        // 获取多仓位列表
        showMorePosition(row){
            this.morePosition = true
            let dataList = this.warehouseList.find(item => {
                return item.name == row.warehouse
            })
            if(dataList != undefined){
                row.warehouse = dataList.warehouseId
            }
            storageMorePosition(row.id).then(res => {
                if(row.isSerial == '0'){
                    this.moreData = res.rows
                    this.total = row.total
                    this.pendingStorage = row.pendingStorage == null ? 0 : row.pendingStorage
                }else{
                    this.total = row.total
                    this.pendingStorage = row.pendingStorage == null ? 0 : row.pendingStorage
                    if(res.rows.length == 0 && row.outStore > 0){
                        let obj = {
                            businessId: row.id,
                            productId: row.productId,
                            productCode: row.productCode,
                            productName: row.productName,
                            purchaseNum: row.total,
                            endNum: row.outStore,
                            warehouse: row.warehouse,
                            areaId: row.areaId,
                            areaName: row.areaName,
                            positionId: row.positionId,
                            positionName: row.positionName,
                            businessType: 1,
                            batchNumber: row.batchNumber
                        }
                        storageAddPosition(obj).then(res => {
                            if(res.code == 200){
                                storageMorePosition(row.id).then(res => {
                                    res.rows.forEach(item => {
                                        if(item.endNum == 0){
                                            return item.endNum = ''
                                        }
                                    })
                                    this.moreData = res.rows
                                })
                            }
                        })
                    }else if(res.rows.length >= 0 && row.outStore == ''){
                        let obj = {
                            businessId: row.id,
                            productId: row.productId,
                            productCode: row.productCode,
                            productName: row.productName,
                            purchaseNum: row.total,
                            endNum: '',
                            warehouse: row.warehouse,
                            areaId: row.areaId,
                            areaName: row.areaName,
                            positionId: row.positionId,
                            positionName: row.positionName,
                            businessType: 1,
                            batchNumber: row.batchNumber
                        }
                        storageAddPosition(obj).then(res => {
                            if(res.code == 200){
                                storageMorePosition(row.id).then(res => {
                                    res.rows.forEach(item => {
                                        if(item.endNum == 0){
                                            return item.endNum = ''
                                        }
                                    })
                                    this.moreData = res.rows
                                })
                            }
                        })
                    }else{
                        res.rows.forEach(item => {
                            if(item.endNum == 0){
                                return item.endNum = ''
                            }
                        })
                        this.moreData = res.rows
                    }
                }
            })
        },
        // 多仓位跳转仓库列表页面
        morePositionWarehouseList(index, row){
            // console.log(row)
            if(row.endNum > 0){
                this.$modal.msgError('实际数量已存在，不能编辑!')
            }else{
                this.$router.push({path:"/warehouseManagement/warehouse/list", query:{ type: 'outSaleMorePosition', id: this.id, list: row, index: index, total: this.total, pendingStorage: this.pendingStorage }})
            }
        },
        // 多仓位单个新建
        onAddMorePosition(row){
            if(this.pendingStorage > 0){
                let obj = {
                    businessId: row.businessId,
                    productId: row.productId,
                    productCode: row.productCode,
                    productName: row.productName,
                    purchaseNum: row.purchaseNum,
                    endNum: '',
                    warehouse: row.warehouse,
                    areaId: '',
                    areaName: '',
                    positionId: '',
                    positionName: '',
                    businessType: 1,
                    batchNumber: row.batchNumber
                }
                storageMoreAdd(obj).then(res => {
                    if(res.code == 200){
                        storageMorePosition(row.businessId).then(res => {
                            res.rows.forEach(item => {
                                if(item.endNum == 0){
                                    return item.endNum = ''
                                }
                            })
                            this.moreData = res.rows
                        })
                    }
                })
            }else{
                this.$modal.msgError('不能新建仓位！')
            }
        },
        // 多仓位数量验证
        inputEditNum(val, row){
            if(row.areaId !== null ){
                if(val == '' || val == undefined){
                    // this.$modal.msgError('实际数量不能为空!')
                }else{
                    if(/^[1-9]\d*$|^0$/.test(val) == false){
                        this.$modal.msgError('实际数量必须是数字！')
                        row.endNum = ''
                        return false
                    }else{
                        if(JSON.parse(val) <= 0){
                            row.endNum = ''
                            this.$modal.msgError('实际数量必须大于0!')
                        }else{
                            let num = 0
                            this.moreData.forEach(item => {
                                num += Number(item.endNum)
                                return num
                            })
                            if(num > this.total){
                                row.endNum = ''
                                this.$modal.msgError('实际数量不能大于待出库数量!')
                            }
                        }
                    }
                }
            }else{
                row.endNum = ''
                this.$modal.msgError('请选择仓位!')
            }
        },
        // 多仓位数据保存
        onBlurEditNum(val, row){
            row.oldPlanNum = this.pendingStorage
            if(val.target.value == null || val.target.value == ''){
                this.$modal.msgError('实际数量不能为空!')
            }else{
                console.log(row)
                let obj = {
                    specificationCode: row.productCode,
                    batchNumber: row.batchNumber == null ? -1 : row.batchNumber,
                    warehouseId: row.warehouse,
                    areaId: row.areaId,
                    positionId: row.positionId
                }
                // 查询库存数量
                orderSearchStorage(obj).then(res => {
                    if(res.code == 200){
                        if(res.data && res.data > 0){
                            this.getStorageEditMorePosition(row)
                        }else{
                            this.$modal.msgError('库存不足！')
                            row.endNum = ''
                        }
                    }
                })
            }
        },
        // 多仓位数据保存
        getStorageEditMorePosition(e){
            storageEditPosition(e).then(res => {
                if(res.code == 200){
                    this.getDetailData()
                    this.total = res.data.total
                    this.pendingStorage = res.data.pendingStorage
                }
            })
        },
        // 多仓位删除一行
        onDeleteMorePosition(row){
            this.$modal.confirm('是否确认删除当前数据？', '删除').then(() => {
                delMorePosition(row.id).then(res => {
                    if(res.code == 200){
                        storageMorePosition(row.businessId).then(res => {
                            res.rows.forEach(item => {
                                if(item.endNum == 0){
                                    return item.endNum = ''
                                }
                            })
                            this.moreData = res.rows
                        })
                    }
                })
            }).catch(() => {})
        },
        // 关闭多仓位
        onHideMorePosition(){
            this.morePosition = false
            this.moreData = []
            this.getDetailData()
        },
        // 打印
        btnPrint(){
            this.$print(this.$refs.print)
        },
        // 票号保存
        onInvoiceSave(row){
            editOutSale({id: row.id, invoice: row.invoice }).then(res => {
                if(res.code == 200){
                    this.getDetailData()
                }
            })
        },
        // 一键出库
        oneKeyOutbound(){
            oneOutbound(this.id).then(res => {
                if(res.code == 200){
                    this.$modal.msgSuccess("出库中,请稍后刷新列表查看！")
                    this.$tab.closeOpenPage({ path: "/sales/outSale/list" })
                    // this.getDetailData()
                }
            })
        },
        // 切换出库类型
        batchChange(index){
            this.current = index
            if(index == 0){
                this.isBatchNumber = false
                this.getDetailData()
            }else{
                this.isBatchNumber = true
                this.index = 0
                this.$nextTick(() => {
                    this.$refs.getBatchInput[this.index].focus()
                    this.$refs.getBatchInput[this.index].blur()
                    this.index ++ 
                })
            }
        },
        // 按批次一键出库
        batchNumberOutbound(){
            // console.log(this.orderDetails)
            let num = this.orderDetails.every(val => val.realTimeStock <= val.orderNum )
            if(num == true){
                this.$modal.loading("正在提交")
                batchOutbound({id: this.id, status: 2, orderDetails: this.orderDetails}).then(res => {
                    if(res.code == 200){
                        this.$modal.closeLoading()
                        this.$modal.msgSuccess("出库中,请稍后刷新列表查看！")
                        this.$tab.closeOpenPage({ path: "/sales/outSale/list" })
                    }
                })
            }else{
                this.$modal.msgError("出库数量不能大于订单数量！")
            }
        },
        // 批次
        inputBatch(e, row){
            // console.log(e)
            // console.log(row)
        },
        // 根据批次查询库存
        onBatchBlur(val, row, index){
            if(val.target.value && val.target.value != ''){
                let data = {
                    productId: row.productId,
                    batchNumber: val.target.value
                }
                batchDetail(data).then(res => {
                    if(res.code == 200){
                        if(res.data.length == 0){
                            this.$modal.msgError("暂无库存,请重新输入批次查询！")
                            this.$refs.getBatchInput[this.index].focus()
                            row.outStore = ''
                            row.realTimeStock = ''
                            row.warehouse = ''
                        }else{
                            if(res.data.length > 1){
                                this.batchOpen = true
                                this.dataList = res.data
                                this.index = index
                            }else{
                                row.outStore = res.data[0].count
                                row.realTimeStock = res.data[0].count
                                row.warehouse = res.data[0].warehouseId
                                this.$refs.getBatchInput[this.index].focus()
                                this.$refs.getBatchInput[this.index].blur()
                                this.index ++ 
                            }
                        }
                    }
                })
            }else{
                this.$modal.msgError("批次不能为空！")
            }
        },
        // 选中批次查询数据
        onSelectData(row){
            this.outSaleDetailData.orderDetails[this.index].warehouse = row.warehouseId
            this.outSaleDetailData.orderDetails[this.index].realTimeStock = row.count
            this.outSaleDetailData.orderDetails[this.index].outStore = row.count
            this.batchOpen = false
            this.dataList = []
            this.$refs.getBatchInput[this.index + 1].focus()
            this.$refs.getBatchInput[this.index + 1].blur()
            this.index = this.index + 1
        },
        // 关闭批次查询数据弹窗
        handleClose(){
            this.batchOpen = false
            this.dataList = []
            this.$modal.msgError("请选择库存信息！")
        },
    }
}
</script>

<style scoped>
.more{
  font-size: 30px;
  cursor: pointer;
}
.icon-more-position{
  font-size: 22px;
  margin: 0 5px;
  cursor: pointer;
}
/* .print {
  position: absolute;
  left:0;
  right:0;
  z-index: -999;
}
.print_h1{
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
.print_p{
  display:flex;
  font-size: 14px;
  line-height: 40px;
}
.print_p span{
  flex:1;
  align-items: flex-end;
}
.printTable{
  font-size: 14px;
  margin-top: 10px;
  width: 100%;
  border: 1px solid #000;
  border-collapse: collapse;
  border-top: none;
  border-right: none;
}
.printTable th{
  border:1px solid #000;
  border-left:none;
  padding: 10px 0;
}
.printTable td{
  text-align:center;
  padding: 10px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
} */
</style>
